<template>
	<div class="stbh">
		<div id="mapDiv" class="mapDiv"></div>
		<div class="back">
			<el-page-header @back="goback" style="margin-left:20px;margin-top:2px;"></el-page-header>
		</div>
		<div class="selectBatch">
			<el-select
			    v-model="principalId"
				@change="choosePrincipal1"
				value-key="id"
			
				placeholder="请选择养殖批号"
			>
				<el-option
					v-for="item in shebeilist"
					:key="item.id"
					:label="item.name"
					:value="item"
				></el-option>
			</el-select>
		</div>
		<div class="selectFacility">
			<el-select
			    v-model="principalId"
				@change="choosePrincipal1"
				value-key="id"
				placeholder="请选择绑定设备"
			>
				<el-option
					v-for="item in shebeilist"
					:key="item.id"
					:label="item.name"
					:value="item"
				></el-option>
			</el-select>
		</div>
	</div>
</template>

<script>
	import { map_findAllCoordinate } from "@/request/breedApi"
	import BaiduMap from '../../../common/js'
	export default {
		data(){
			return{
				principalId:'',
				shebeilist:[],
				addressname:'',
				color1: '#409EFF',
				polygonTool:'',
				zoom: '11',
				points: [],
				T: '',
				lay: '',
				map: '',
				latitude:30.631234,
				longtitude:104.084439,
				form:{},
				formLabelWidth: '80px',
				lng:'',
				lat:'',
				polygon:'',
				polygonclick:'',
				markerTool:'',
				list:[]
			}
		},
		mounted() {
			setTimeout(this.init(),1000)
			// this.init()
		},
		methods:{
			init(){
				map_findAllCoordinate("").then((res)=>{
					this.list = res.data
					for(var i=0;i<this.list.length;i++){
						var r = this.list[i].coordinate.split(",")
						this.longtitude = r[0]
						this.latitude = r[1]
						this.list[i].coordinate = new T.LngLat(parseFloat(r[0]), parseFloat(r[1]))
					}
					BaiduMap.init()
						.then((T) => {  
						this.T = T
						this.zoom = 12
						// this.latitude = localStorage.getItem("latitude")
						this.map = new T.Map('mapDiv')// 初始化地图对象
						this.map.centerAndZoom(new T.LngLat(this.longtitude,this.latitude), 12)// 设置显示地图的中心点和级别
						//创建对象
							// var ctrl = new T.Control.MapType();
							//添加控件
							this.map.addControl(TMAP_HYBRID_MAP);
						// 创建图片对象
						var icon = new T.Icon({
							iconUrl: 'http://api.tianditu.gov.cn/img/map/markerA.png',
							iconSize: new T.Point(19, 27),
							iconAnchor: new T.Point(10, 25)
						})
						var config = {  
							strokeColor:"blue", //折线颜色  s
							fillColor:"blue",    //填充颜色。当参数为空时，折线覆盖物将没有填充效果  
							strokeWeight:"3px", //折线的宽度，以像素为单位  
							strokeOpacity:0.5,  //折线的透明度，取值范围0 - 1  
							fillOpacity:0.5, //填充的透明度，取值范围0 - 1  
							showLabel:true  //是否显示页面，默认为true
						}; 
						this.markerTool = new T.MarkTool(this.map,icon)
						this.polygonTool = new T.PolygonTool(this.map,config);  
						this.geocoder = new T.Geocoder(this.map)
						for(var k=0;k<this.list.length;k++){
							var con = this.list[k].coordinate
							var maker = new T.Marker(con) 
					
							this.map.addOverLay(maker)
						}
					})
				})
				
			},
			goback(){
				this.$router.go(-1)
			},
			choosePrincipal1(){
				
			}
		}
	}
</script>

<style scoped>
	.mapDiv{
	    width: 100%;
	    height: 85vh;
	    z-index:0;
	}
	.stbh{
	    position:relative;
	}
	.back{
		width:120px;
		text-align:center;
		height:30px;
		line-height:30px;
		position: absolute;
		top: 20px;
		left: 40px;
		z-index: 100;
		background:white;
		border-radius:6px;
	}
	.selectBatch{
		width:200px;
		text-align:center;
		height:30px;
		line-height:30px;
		position: absolute;
		top: 20px;
		left: 180px;
		z-index: 100;
		background:white;
		border-radius:6px;
	}
	.selectFacility{
		width:200px;
		text-align:center;
		height:30px;
		line-height:30px;
		position: absolute;
		top: 20px;
		left: 400px;
		z-index: 100;
		background:white;
		border-radius:6px;
	}
</style>
